<template>
	<view>
		<!-- 商品平铺渲染方式 -->
    <view class="goodsList">
      <view class="itemGoods" v-for="(item, index) in list" :key="index" @click="enterProduct(item)" v-if="index <= 3">
        <view class="gImg">
          <image mode="widthFix" src="https://100000063-1252208446.file.myqcloud.com/images/TempImg/hdimg.jpg"></image>
        </view>
        <view class="gTitle">
          <view>THE MACALLAN麦卡伦</view>
          <view>{{item.subtitle || item.itemThirdTitle}}</view>
        </view>
        <view class="gCapacity">
          容量:{{item.valueName || item.specification}}
        </view>
        <view class="gPrice">
          ¥1,090
        </view>
        <view class="gBtn">
          即刻选购
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
    props: {
      list: Array,
      navInfo: Object
    },
		// name:"itemsTileNew",
		data() {
			return {

			};
		},
    methods: {
      enterProduct(item) {
        let path = this.navInfo.navName == "免税专供" ? '/pages/GTR/item?id=' + item.id : '/pages/item/item?id=' + item.itemId + '&valueId=' + item.valueId + '&hasExpose=true'
        uni.navigateTo({
          url: path
        })
      }
    }
	}
</script>

<style lang="less">
page {
    background-color: #f6f5f3;
  }

  /* 标题 */
  .titleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40rpx;

    .j_icon {
      background-image: url(https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/miniprogram/%20images/category-bg.png);
      width: 220rpx;
      height: 50rpx;
      background-position: left;
      background-size: contain;
      background-repeat: no-repeat;
      padding-left: 45rpx;
      margin: 0 15rpx;
      font-size: 38rpx;
    }

    .mcl-youjiantou {
      font-size: 26rpx;
      margin: 0 25rpx 0 10rpx;
    }
  }

  /* banner */
  .bannerBox {
    margin: 28rpx 15rpx 0;
    background-color: #f9f9f9;
  }

  /* 列表 */
  .goodsList {
    margin: 15rpx 15rpx 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    image {
      width: 100%;
      display: block;
    }

    &.slideMod {
      overflow-x: auto;
      flex-wrap: nowrap;
      justify-content: left;

      .itemGoods {
        width: 406rpx;
        margin: 0 15rpx 0 0;
      }

      image {
        width: 406rpx;
        display: block;
      }
    }

    .itemGoods {
      text-align: center;
      width: 49%;
      background-color: #fff;
      margin-bottom: 15rpx;

      &:last-child {
        margin: 0;
      }

      .gTitle {
        color: #030303;
        width: 300rpx;
        margin: 0 auto 10rpx;
        line-height: 48rpx;
      }

      .gCapacity {
        color: #AEAEAE;
        font-size: 24rpx;
        margin-bottom: 18rpx;
      }

      .gPrice {
        font-size: 32rpx;
        margin-bottom: 20rpx;
      }

      .gBtn {
        margin: 0 auto 30rpx;
        width: 340rpx;
        height: 60rpx;
        background: #010101;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 22rpx;
      }
    }
  }
</style>
